<template>
  <div class="searchDetail">
    <van-nav-bar
      title="成交案例"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-list
      v-model="isUpLoading"
      :finished="upFinished"
      :immediate-check="false"
      :offset="10"
      finished-text="数据已全部加载完毕~"
      @load="onLoadList"
    >
      <ul class="searchMsg content">
        <li
          @click="catDetail"
          v-for="(item,index) in GetSearchList"
          :key="index">
          <p>{{item.title}}</p>
          <p v-html="item.content"></p>
          <p>
            {{item.begintime | moment}}
            <span class="right">阅读数:{{item.hit}}</span>
          </p>
        </li>
      </ul>
    </van-list>
    <!--<span v-if="dtWinNumberInfos.length <= 0" class="noData">暂无数据</span>-->
  </div>
</template>

<script>
  import {getStore} from '../../../src/config/mUtils'

  export default {
    name: "caseDetail",
    data() {
      return {
        pageSize: 20, // 每页条数
        pageIndex: 1, // 页码
        GetSearchList: [], // 请求数据
        isUpLoading: false, // 上拉加载
        upFinished: false, // 上拉加载完毕
        offset: 100 // 滚动条与底部距离小于 offset 时触发load事件
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        const _self = this
        this.$axios.post('news/record', this.qs.stringify({
          "token": getStore("token"),
          "cityid": getStore("cityid"),
          "pagenum": this.pageSize,
          "page": this.pageIndex
        })).then((res) => {
          if ( res.data.status === 1 ) {
            let re = res.data.data.list;

            if ( re == null || re.length === 0 ) {
              _self.upFinished = true
              return
              //加载结束
            }

            if ( re.length < this.pageSize ) {
              //最后一页不足10条的情况
              _self.upFinished = true
            }

            //处理数据
            if ( _self.pageIndex === 1 ) {
              _self.GetSearchList = re
            } else {
              _self.GetSearchList = _self.GetSearchList.concat(re)
            }
          }
        }).catch(error => {
          this.$toast('获取资源列表异常')
        }).finally(() => {
          _self.isUpLoading = false
        })
      },
      catDetail() {
      },
      //上拉加载请求方法
      onLoadList() {
        this.pageIndex++
        this.initData()
      },
      onClickLeft() {
        this.$router.go(-1)
      }
    }
  }
</script>

<style scoped lang="scss">
  .searchDetail {
    .searchMsg {
      margin-top: 5px;
      background: #fff;

      li {
        padding: 10px;
        border-bottom: 1px solid #e3e3e3;
        font-size: 12px;
        color: #858586;
        display: block;
        /*height: 100px;*/

        p {
          /*text-overflow: ellipsis;*/
          /*white-space: nowrap;*/
          /*overflow: hidden;*/
          text-indent: 5px;

          &:nth-child(1) {
            font-size: 28px;
            color: #3F4358;
            font-weight: bold;
          }

          &:nth-child(2) {
            color: #9fa2a9;
            font-size: 24px;
            /*height: 19px;*/
            margin-top: 3px;
            margin-bottom: 3px;
          }

          &:nth-child(3) {
            color: #9fa2a9;
            font-size: 20px;
            /*height: 40px;*/
            margin-top: 3px;
            margin-bottom: 3px;

          }
        }
      }
    }

    .right {
      float: right
    }
  }
</style>
